<template>
    <el-container>
        <el-header style="border-bottom: none;justify-content: space-around;">
            <div class="total">
                <div class="font">销售数量</div>
                <div class="money">{{ total_stock.number }}</div>
            </div>
            <div class="total">
                <div class="font">销售额</div>
                <div class="money">¥{{ total_stock.sales_money }}</div>
            </div>
            <div class="total">
                <div class="font">成本</div>
                <div class="money">¥{{ total_stock.cost_money }}</div>
            </div>
            <div class="total">
                <div class="font">销售毛利</div>
                <div class="money">¥{{ total_stock.sales_ml }}</div>
            </div>
            <div class="total">
                <div class="font">毛利率</div>
                <div class="money">{{ total_stock.sales_mll }}%</div>
            </div>
            <div class="total">
                <div class="font">其他收入</div>
                <div class="money">¥{{ total_stock.other_coll }}</div>
            </div>
            <div class="total">
                <div class="font">其他支出</div>
                <div class="money">¥{{ total_stock.other_pay }}</div>
            </div>
            <div class="total">
                <div class="font">纯利润</div>
                <div class="money">¥{{ total_stock.c_profit }}</div>
            </div>
        </el-header>
        <el-header style="height: 50px;">
            <div class="left-panel"></div>
            <div class="right-panel">
                <div class="right-panel-search">
                    <el-button type="warning"  @click="batch_export">导出</el-button>
                    <el-input v-model="search.goods" placeholder="请输入商品关键词" clearable @keyup.enter="upsearch"></el-input>
                    <!-- <el-select v-model="search.customer_id" filterable clearable placeholder="请选择客户">
                        <el-option v-for="item in clientList" :key="item.id" :label="item.customer_name" :value="item.id"/>
                    </el-select> -->
                    <sc-table-select v-model="customer_boj" filterable :apiObj="clientObj" :table-width="700" :props="props" @change="clientChange"
                     border placeholder="请选择客户">
                        <el-table-column prop="id" label="ID" width="60"></el-table-column>
                        <el-table-column label="客户编号" prop="customer_code" align="center"></el-table-column>
                        <el-table-column label="客户名称" prop="customer_name" align="center"></el-table-column>
                        <el-table-column label="客户助记码" prop="help_remember" align="center"></el-table-column>
                        <el-table-column label="来源" prop="sourcetxt.source_name" align="center"></el-table-column>
                        <el-table-column label="联系人" prop="contacts" align="center"></el-table-column>
                        <el-table-column label="联系人手机" prop="mobile" align="center"></el-table-column>
                        <el-table-column label="地址" prop="address" align="center"></el-table-column>
                        <el-table-column label="应收欠款" prop="only_money" align="center"></el-table-column>
                        <el-table-column label="备注" prop="remark" align="center"></el-table-column>
                        <el-table-column label="业务员" prop="salesman_name" align="center"></el-table-column>
                    </sc-table-select>
                    <el-select v-model="search.ware_id" filterable placeholder="请选择仓库">
                        <el-option v-for="item in wareList" :key="item.id" :label="item.ware_name" :value="item.id" />
                    </el-select>
                    <el-date-picker v-model="search.date" :value-format="'YYYY-MM-DD'" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
                    <el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
                    <el-button type="primary" icon="el-icon-refresh" @click="refresh"></el-button>
                </div>
            </div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" row-key="id" :apiObj="apiObj" @selection-change="selectionChange" border @setExtend="setExtend" :params="query">
                <el-table-column type="selection" width="50" reserve-selection align="center"></el-table-column>
                <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
                <el-table-column label="商品名称" prop="goods_name" align="center"></el-table-column>
                <el-table-column label="规格型号" prop="goods_spec" align="center"></el-table-column>
                <el-table-column label="单位" prop="unit_name" align="center"></el-table-column>
                <el-table-column label="商品类型" prop="cate_name" align="center"></el-table-column>
                <el-table-column label="销售数量" prop="number" align="center"></el-table-column>
                <el-table-column label="所属仓库" prop="ware_name" align="center"></el-table-column>
                <el-table-column label="出库日期" prop="out_date" align="center"></el-table-column>
                <el-table-column label="销售均价" prop="price" align="center"></el-table-column>
                <el-table-column label="含税均价" prop="tax_price" align="center"></el-table-column>
                <el-table-column label="销售收入" prop="sales_sr" align="center"></el-table-column>
                <el-table-column label="销售成本" prop="sales_cb" align="center"></el-table-column>
                <el-table-column label="销售毛利" prop="sales_ml" align="center"></el-table-column>
                <el-table-column label="销售毛利率" prop="sales_mll" align="center"></el-table-column>
                <el-table-column label="税额" prop="tax_amount" align="center"></el-table-column>
                <el-table-column label="价税合计" prop="total_tax_money" align="center"></el-table-column>
            </scTable>
        </el-main>
    </el-container>
</template>
<script>

export default {
    name: '销售利润报表（列表）',
    components: {
    },
    data() {
        return {
            apiObj: this.$API.finance.salerate,
            clientObj: this.$API.client.client.list,
            selection: [],
            search: {
                goods: null,
                customer_id: null,
                ware_id: null,
                date: [this.moment().startOf('month').format('YYYY-MM-DD'), this.moment().endOf('month').format('YYYY-MM-DD')],
            },
            total_stock: {
                number: 0,
                other_pay: 0,
                other_coll: 0,
                cost_money: 0,
                sales_money: 0,
                sales_ml: 0,
                sales_mll: 0,
                c_profit: 0,
            },
            query: {
                date: [this.moment().startOf('month').format('YYYY-MM-DD'), this.moment().endOf('month').format('YYYY-MM-DD')],
            },
            clientList: [],
            wareList: [],
            customer_boj: "",
            props: {
                label: 'customer_name',
                value: 'id',
                keyword: "keyword"
            },
        }
    },
    mounted() {
        // this.getClient();   // 客户;
        this.getWare()      // 仓库;
    },
    methods: {
        clientChange(e){
            console.log('e :>> ', e);
            this.search.customer_id = e.id
        },
        setExtend(data) {
            this.total_stock = data
        },
        //表格选择后回调事件
        selectionChange(selection) {
            this.selection = selection;
        },
        //搜索
        upsearch() {
            this.$refs.table.upData(this.search)
        },
        refresh() {
            for (const key in this.search) {
                this.search[key] = null;
            }
            this.customer_boj = ""
            this.search.date = [this.moment().startOf('month').format('YYYY-MM-DD'), this.moment().endOf('month').format('YYYY-MM-DD')]
            this.upsearch()
        },
        /**客户 */
        async getClient() {
            var res = await this.$API.client.client.all.get();
            this.clientList = res.data;
        },
        /**获取仓库 */
        async getWare(){
            var res = await this.$API.goods.ware.all.get();
            this.wareList = res.data
        },
        /**导出*/
		async batch_export() {
            let query = {
                goods: this.search.goods,
                customer_id: this.search.customer_id,
                ware_id: this.search.ware_id,
                date: this.search.date,
                export: 2
            }
			var res = await this.$API.finance.salerate.get(query);
			if (res.code == 2) {
				this.$message.success("导出成功");
				window.location.href = res.data.url
			} else {
				this.$alert(res.message, "提示", {type: "error"});
			}
		},
    }
}
</script>

<style lang="scss">
.total{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 12.5%;
    .font{
        font-size: 15px;
    }
    .money{
        font-size: 23px;
        font-weight: bold;
    }
}
</style>
